<template>
  <div class="timeline-demo">
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <x-header style="background-color:#3d82e5;width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="{showBack: false}">
      <p name="content" style="margin-left: -12px">查看物流</p>
    </x-header>
    <div style="padding-top: 38px">
      <timeline>
        <timeline-item v-for="item in itemArry">
          <div v-if="item.callssType === true">
            <h4 class="recent">{{item.acceptStation}}</h4>
            <p  class="recent">{{item.acceptTime}}</p>
          </div>
          <div v-if="item.callssType === false">
            <h4 style="color: #666;">{{item.acceptStation}}</h4>
            <p  style="color: #888;">{{item.acceptTime}}</p>
          </div>
        </timeline-item>
      </timeline>
    </div>
    <x-button style="font-size: 15px;width: 200px;background-color: #3d82e5;color: #ffffff;margin-bottom: 40px" @click.native="goBackfn">确定</x-button>
  </div>
</template>
<script>
  import { Timeline, TimelineItem, XButton, Alert, XHeader } from 'vux'
  import * as urls from '../../../../api/urls'
  import * as types from '../../../../store/types'

  export default {
    components: {
      Timeline,
      TimelineItem,
      XButton,
      Alert,
      XHeader
    },
    mounted: function () {
      this.getLogisticsList()
      this.weixinfn46()
    },
    data () {
      return {
        alertShow: {
          showmsg: false,
          msg: ''
        },
        itemArry: []
      }
    },
    methods: {
      weixinfn46 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      },
      getLogisticsList () {
        let orderId = window.sessionStorage.getItem('orderId')
        let that = this
        this.http(urls.orderTrance, {orderId: orderId}, function (res) {
          if (res.status === 100) {
            if (res.data.data.length !== 0) {
              res.data.data.forEach(function (item) {
                if (item.traces !== null && item.traces !== '' && item.traces !== undefined) {
                  let obj = JSON.parse(item.traces)
                  that.itemArry = obj
                }
              })
              that.itemArry.reverse()
              for (let i = 0; i < that.itemArry.length; i++) {
                if (i === 0) {
                  that.itemArry[i].callssType = true
                } else {
                  that.itemArry[i].callssType = false
                }
              }
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      goBackfn () {
        let that = this
        that.$store.commit(types.USER_ORDER, {index: 3})
        that.$router.push({
          path: '/order/OrderIndex'
        })
        that.$router.go(1)
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      }
    }
  }
</script>
<style scoped="scoped">
  .recent {
    color: rgb(4, 190, 2)
  }
</style>
